<template>
	<view>
		<view class="success flex_c" :style="`background: url(${$util.prefix('game/platform_records_bg.png')}) 0 0 no-repeat;`">
			<view class="title flex_center">
				<text v-if="!old_prize_list.length">很遗憾未中奖</text>
				<text v-else>恭喜您获得</text>
			</view>
			
			<view class="notice" v-if="old_prize_list.length == 1">
				小动物饱餐一顿，意满离~
			</view>
			
			<view class="notice" v-if="old_prize_list.length == 2">
				小动物饱餐一顿且猜中Boss
			</view>
			
			
			<view class="success-content flex_c" v-if="!old_prize_list.length">
				<view class="empty flex_r_around">
					<image :src="$util.prefix('game/no_prizes.png')" mode="aspectFill"></image>
				</view>
				
				<view class="btn flex_r_around" :style="`background: url(${$util.prefix('game/betting_btn_bg.png')}) 0 0 no-repeat;`" @click="closeSuccessModel">
					<text>再选一次</text>
				</view>
			</view>
			
			<view class="success-content flex_c" v-else>
				<view class="grid">
					<u-grid :border="false" :col="old_prize_list.length">
						<u-grid-item v-for="(item,index) in old_prize_list" :key="index">
							<view class="item flex_c">
								<image :src="item.old_prize_image" mode="aspectFill"></image>
								<view class="price flex_center">
									<text>{{ item.old_prize_name }}×{{ item.old_prize_num }}</text>
								</view>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
				
				<view class="btn flex_r_around" :style="`background: url(${$util.prefix('game/betting_btn_bg.png')}) 0 0 no-repeat;`" @click="closeSuccessModel">
					<text>确定</text>
				</view>
				
				<view class="text">
					获得的礼物已存放至您背包中
				</view>
				
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props: {
			old_prize_list: {
				type: Array
			}
		},
		methods: {
			closeSuccessModel(){
				this.$emit('closeSuccessModel')
			}
		}
	}
</script>

<style lang="less">
	.success {
		width: 100vw;
		height: 100vw;
		background-size: 100% !important;
		padding-top: 16rpx;
		padding-bottom: 60rpx;
		
		.title {
			text {
				font-size: 32rpx;
				color: #FFEABB;
				line-height: 38rpx;
				font-family: 'gongfu';
			}
		}
		
		.notice {
			margin: 40rpx 0 10rpx;
			width: 536rpx;
			height: 52rpx;
			background: linear-gradient( 90deg, rgba(178,111,62,0) 0%, #B26F3E 35%, #B26F3E 65%, rgba(178,111,62,0) 100%);
			opacity: 0.82;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 52rpx;
			text-align: center;
		}
	
		.success-content {
			flex: 1;
			.empty {
				margin: 78rpx 0 120rpx;
				image {
					width: 288rpx;
					height: 240rpx;
				}
			}
			
			.btn {
				width: 196rpx;
				height: 80rpx;
				background-size: 100% !important;
				padding: 0 12rpx;
				
				text {
					font-size: 28rpx;
					color: #FFEABB;
					line-height: 34rpx;
					font-family: 'gongfu';
				}
			}
		
			.grid {
				width: 500rpx;
				margin: 60rpx 0;
				.item {
					image {
						width: 176rpx;
						height: 176rpx;
					}
					
					.price {
						i,text {
							font-weight: 500;
							font-size: 28rpx;
							color: #8D440E;
							line-height: 40rpx;
							font-style: normal;
						}
					}
				}
			}
			
			.text {
				margin-top: 8rpx;
				font-size: 24rpx;
				color: #BE7C4A;
				line-height: 34rpx;
			}
		
		}
	
	}
</style>
